.grid {
  width: 100%;
  height: auto;
  /*
  	通过命名区域布局
  */
}
.grid .my-contianer {
  width: 700px;
  height: 700px;
  background: lightgreen;
  box-sizing: border-box;
  padding: 10px;
  display: grid;
  /*
    -------------列------------
    1fr 相当于flex布局中的flex:1, 以此类推
    grid-template-columns: 跟几个单位即为几列展示
    */
  grid-template-columns: 100px 1fr 100px;
  /*
    --------------行-----------  同理
    */
  grid-template-rows: 100px 1fr 100px;
  grid-gap: 20px;
  grid-gap: 20px 10px;
}
.grid .my-contianer .left {
  background: yellow;
}
.grid .my-contianer .right {
  background: blue;
}
.grid .grid-container {
  width: 700px;
  height: 700px;
  background: lightgreen;
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  /* 示例：三列 */
  grid-template-rows: 160px 70px;
  /* 2行：固定60px + 自动高度 */
  grid-template-areas: "header sidebar main" "one two three";
  gap: 10px;
}
.grid .grid-container .header {
  grid-area: header;
  align-self: center;
  justify-self: center;
}
.grid .grid-container .sidebar {
  grid-area: sidebar;
}
.grid .grid-container .main {
  grid-area: main;
  background: yellow;
}
.grid .grid-container .one {
  grid-area: one;
}
.grid .grid-container .two {
  grid-area: two;
}
.grid .grid-container .three {
  grid-area: three;
  background: red;
}
